<template>
  <Modal v-model:visible="visible" title="编辑域名" @cancel="close">
    <template #footer>
      <Button key="submit" type="primary" @click="submit">确认</Button>
      <Button key="back" @click="close">返回</Button>
    </template>
    <Form :model="formState" v-bind="formItemLayout" ref="formRef">
      <FormItem label="主域名" name="zoneName" :rules="[{ required: true, message: '请输入主域名' }]">
        <Input v-model:value="formState.zoneName"></Input>
      </FormItem>
      <FormItem label="子域名" name="name" :rules="[{ required: true, message: '请输入子域名' }]">
        <Input v-model:value="formState.name"></Input>
      </FormItem>
    </Form>
  </Modal>
</template>
<script lang="ts" setup>
import { Modal, Form, FormItem, Input, message, Button } from 'ant-design-vue';
import { ref } from 'vue';
import { EditDnParam } from '/@/api/system-mgmt/tenant-app-mgmt/model/tenantAppModel';
import { editDn } from '/@/api/system-mgmt/tenant-app-mgmt/tenantApp';

const visible = ref(false);

let formState = ref({} as EditDnParam);
const formRef = ref();

const openEdit = (record) => {
  formState.value.appId = record.appId;
  formState.value.name = record.name;
  formState.value.zoneName = record.zoneName;
  formState.value.tenantCode = record.tenantCode;
  visible.value = true;
};
const close = () => {
  visible.value = false;
  formRef.value.clearValidate();
  formState.value = {} as EditDnParam;
};
const emit = defineEmits(['submitSuccess']);
const submit = async () => {
  let params = formState.value;
  let res = await editDn(params);
  if (res) {
    message.success('编辑成功');
  }
  emit('submitSuccess');
  close();
};

const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 14 },
};
defineExpose({ openEdit });
</script>
